<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地文件上传</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>


    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.2&date=1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>


    <style>
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    </style>

</head>
<body>

    <div id="app" style="padding: 20px 20px;">
        <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple">
                    待上传文件
                </div>

                <div style="padding: 2px 5px;">
                    <template>
                        <el-table
                                :data="tableDataLeft"
                                border="1"
                                height="400"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="文件名称"
                                    width="180">
                            </el-table-column>

                        </el-table>
                    </template>

                    <el-button type="primary" style="margin-top: 10px" size="small" @click="uploadFiles" >批量文件上传</el-button>
                </div>
            </el-col>
            <el-col  span="12" >
                <div class="grid-content bg-purple-light">
                    已上传文件
                </div>

                <div>
                    <template>
                        <el-table
                                :data="tableData"
                                ref="uploadTable"
                                height="400"
                                border="1"
                                style="width: 100%">
                            <el-table-column type="selection" width="55"> </el-table-column>
                            <el-table-column
                                    prop="filename"
                                    label="文件名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="wsize"
                                    label="文件大小"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="scr"
                                    label="上传人">
                            </el-table-column>

                            <el-table-column
                                    prop="scsj"
                                    label="上传时间">
                            </el-table-column>


                            <el-table-column fixed="right" label="操作" >
                                <template slot-scope="scope">
                                    <!-- <a target="_black" :href="scope.row.path">查看</a> -->
                                    <el-button v-if="scope.row.status == 'success'"
                                               @click.stop="lookList(scope.row)"
                                               type="success"
                                               size="mini"
                                    >查看</el-button
                                    >

                                    <el-button
                                            v-if="parmsData.view != '1'"
                                            @click.stop="deleteUpload(scope.row)"
                                            type="danger"
                                            size="mini"
                                    >删除</el-button
                                    >

                                </template>
                            </el-table-column>


                        </el-table>
                    </template>

                    <el-button type="primary" style="margin-top: 10px" size="small" @click="downFiles" >批量下载文件</el-button>
                    <el-button type="primary" style="margin-top: 10px" size="small" @click="deleteAll" v-if="parmsData.view != '1'" >全部删除</el-button>

                </div>

            </el-col>

        </el-row>
    </div>

    <script>

        let local_url = "http://127.0.0.1:11280/";



        var vm = new Vue({
           el:"#app",
           data:{
               parmsData :{},
               tableDataLeft:[],
               tableData: [],
               chooseArr: [],
               selectRow: [],
               selectStr:"",
           },
           created(){
               this.parmsData = getParams();
               this.init();
           },
            methods:{
               init(){
                   window.setInterval(function () {
                       vm.getFilesDaishangchuan();
                       vm.getTableData();
                   },1000);

               },
                async deleteAll(){
                    this.$confirm("此操作将永久删除所有记录吗, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(async () => {
                            load();
                            const params = {
                                dataid: vm.parmsData.dataid,
                            };
                            const res = await api.queryBody(
                                "/admin/api/mirc/MedicalInsuranceReimbursementController/deleteAll",
                                params
                            );
                            layer.closeAll();
                            if (res.code == 1) {
                                vm.$message.success(res.msg);
                                vm.getTableData();
                            } else {
                                vm.$message.error(res.msg);
                            }
                        })
                        .catch((e) => {
                            console.log(e)
                            vm.$message.info("已取消删除");
                        });
                },
                lookList(row) {
                   if(row.path.substr(0, 1) != "/"){
                       window.open("/"+row.path);
                   }else {
                       window.open(row.path);
                   }
                },
                // 删除当前待上传列
                deleteUpload(row) {
                    this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(async () => {
                            const params = {
                                ids: row.id,
                            };
                            const res = await api.queryBody(
                                "/admin/api/mirc/MedicalInsuranceReimbursementController/deleteAtthFiles",
                                params
                            );
                            if (res.code == 1) {
                                this.$message.success(res.msg);
                                this.getTableData();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((e) => {
                            console.log(e)
                            this.$message.info("已取消删除");
                        });
                },
                downFiles(){
                    top.alert("开始下载文件，请至本地文件夹中查看!");
                    let server_url = wwwurl;
                    $.getJSON(local_url+"/admin/api/BaseController/down?url="+server_url+"&jsoncallback=?&token="+localStorage.getItem("token")+"&type="+this.parmsData.type+"&dataid="+this.parmsData.dataid,function (data) {
                        console.log(data);
                    });
                },
               uploadFiles(){
                   top.alert("开始上传文件");
                   let server_url = wwwurl+"/admin/api/mirc/MedicalInsuranceReimbursementController/upload";
                   $.getJSON(local_url+"/admin/api/BaseController/upload?url="+server_url+"&jsoncallback=?&token="+localStorage.getItem("token")+"&type="+this.parmsData.type+"&dataid="+this.parmsData.dataid,function (data) {
                       console.log(data);
                   });

               },
                getFilesDaishangchuan(){
                    $.getJSON(local_url+"/admin/api/BaseController/getFilesList?jsoncallback=?",function (data) {
                        let res = JSON.parse(data);
                        vm.tableDataLeft = res.data;
                    })
                },
                //获取已上传的文件
                async getTableData(){
                    const res = await api.queryBody("/admin/api/mirc/MedicalInsuranceReimbursementController/atthList",{type:this.parmsData.type,dataid:this.parmsData.dataid});
                    this.tableData = res.data;
                }
            }
        });
    </script>
</body>
</html>